<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="6" :offset="20">
        <el-button type="primary" size="mini" @click="handleAdd">添加版本更新</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="listLoading"
      style="margin-top: 20px"
      :data="list"
      size="mini"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope" align="center">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="APP端" align="center">
        <template slot-scope="scope">
          {{ formatPlatform(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column label="版本名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.versionName }}
        </template>
      </el-table-column>
      <el-table-column label="版本数字" align="center">
        <template slot-scope="scope">
          {{ scope.row.versionNumber }}
        </template>
      </el-table-column>
      <el-table-column label="包地址" align="center">
        <template slot-scope="scope">
          {{ scope.row.url }}
        </template>
      </el-table-column>
      <el-table-column label="强制更新" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.forceUpdate"
            active-color="#ff4949"
            inactive-color="#13ce66"
            @change="change(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.versionDescription }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      :current-page.sync="page.current"
      :page-sizes="[10,20,50,100, 200, 300, 400]"
      :page-size="page.size"
      layout="total,sizes, prev, pager, next"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      :title="dialogTitle"
      :close-on-click-modal="false"
      :visible.sync="centerDialogVisible"
      width="40%"
      center
    >
      <el-form>
        <el-form-item label="版本名称" :label-width="formLabelWidth">
          <el-input v-model="newVersion.versionName" autocomplete="off" size="mini" />
        </el-form-item>
        <el-form-item label="版本数字" :label-width="formLabelWidth">
          <el-input v-model.number="newVersion.versionNumber" autocomplete="off" size="mini" />
        </el-form-item>
        <el-form-item label="APP端" :label-width="formLabelWidth">
          <el-radio v-model="newVersion.platform" label="s">学生端</el-radio>
          <el-radio v-model="newVersion.platform" label="t">教师端</el-radio>
          <el-radio v-model="newVersion.platform" label="p">家长端</el-radio>
        </el-form-item>
        <el-form-item label="版本描述" :label-width="formLabelWidth">
          <el-input v-model="newVersion.versionDescription" type="textarea" :rows="4" autocomplete="off" size="mini" />
        </el-form-item>
        <el-form-item label="强制更新" :label-width="formLabelWidth">
          <el-switch v-model="newVersion.forceUpdate" />
        </el-form-item>
        <el-form-item label="APK包" :label-width="formLabelWidth">
          <file-upload :size="50" :file-list="newVersion.fileList" :version="newVersion.versionName" :platform="getPlatform(newVersion.platform)" path="apk/" @arrayImageUrl="getUpLoadImg($event,2)" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleNewSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { versionList, versionDelete, versionUpdate, versionNew } from '@/api/version'
import fileUpload from '@/components/FileUpload'
export default {
  components: {
    fileUpload
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      centerDialogVisible: false,
      formLabelWidth: '80px',
      dialogTitle: '新增版版本更新',
      newVersion: {
        id: -1,
        versionName: '',
        versionNumber: 0,
        versionDescription: '',
        forceUpdate: true,
        platform: 's',
        fileList: [],
        url: ''
      },
      page: {
        size: 20,
        current: 1,
        total: 1
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    formatPlatform(row, column) {
      if (row.platform === 's') {
        return '学生端'
      } else if (row.platform === 't') {
        return '教师端'
      } else {
        return ''
      }
    },
    fetchData() {
      this.listLoading = true
      versionList(this.page).then(response => {
        this.list = response.body
        this.listLoading = false
        this.page.total = response.totalCount
      })
    },
    handleAdd() {
      this.dialogTitle = '新增版本更新'
      this.newVersion.versionName = ''
      this.newVersion.versionNumber = 0
      this.newVersion.versionDescription = ''
      this.newVersion.forceUpdate = false
      this.newVersion.platform = 's'
      this.newVersion.id = -1
      this.newVersion.fileList = []
      this.newVersion.url = ''
      this.centerDialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑版本更新'
      this.newVersion.versionName = row.versionName
      this.newVersion.versionNumber = row.versionNumber
      this.newVersion.versionDescription = row.versionDescription
      this.newVersion.forceUpdate = row.forceUpdate
      this.newVersion.platform = row.platform
      this.newVersion.id = row.id
      this.newVersion.url = row.url
      this.newVersion.fileList = []
      this.newVersion.fileList.push(row.url)
      this.centerDialogVisible = true
    },
    handleDelete(row) {
      this.$confirm('是否确认删除该更新', '删除标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        versionDelete({ id: row.id }).then(response => {
          if (response.code === 200) {
            this.fetchData()
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          } else {
            this.$message({
              type: 'waring',
              message: response.message
            })
          }
        })
      })
    },
    handleNewSave() {
      if (this.newVersion.id === -1) {
        versionNew(this.newVersion).then(response => {
          if (response.code === 200) {
            this.centerDialogVisible = false
            this.fetchData()
            this.$message({
              type: 'success',
              message: '版本更新添加成功'
            })
          } else {
            this.$message({
              type: 'waring',
              message: response.message
            })
          }
        })
      } else {
        versionUpdate(this.newVersion).then(response => {
          if (response.code === 200) {
            this.centerDialogVisible = false
            this.fetchData()
            this.$message({
              type: 'success',
              message: '版本更新编辑成功'
            })
          } else {
            this.$message({
              type: 'waring',
              message: response.message
            })
          }
        })
      }
    },
    tagNameValidator(val) {
      if (val !== '') {
        return true
      } else {
        return '请输入标签名称'
      }
    },
    handleSizeChange(val) {
      this.page.size = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.fetchData()
    },
    getPlatform(val) {
      if (this.newVersion.platform === 'p') {
        return 'parent'
      } else if (this.newVersion.platform === 's') {
        return 'student'
      } else if (this.newVersion.platform === 't') {
        return 'teacher'
      } else {
        return ''
      }
    },
    change(row) {
      versionUpdate(row).then(response => {
        if (response.code === 200) {
          this.centerDialogVisible = false
          this.fetchData()
          this.$message({
            type: 'success',
            message: '变更成功'
          })
        } else {
          this.$message({
            type: 'waring',
            message: response.message
          })
        }
      })
    },
    // 获取上传图片的路径
    getUpLoadImg(val, type) {
      console.log(val)
      this.newVersion.url = val[0]
      this.newVersion.fileList = []
      this.newVersion.fileList.push(val[0])
    }
  }
}
</script>
